import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  void playMusic(int index) {
    final player = AudioPlayer();
    player.play(AssetSource('note$index.wav'));
  }

  Expanded buildKey({Color? colorName, int? index} ) {
    return Expanded(
      child: MaterialButton(
        onPressed: () {
          playMusic(index ?? 1);
        },
        color: colorName ?? Colors.black,
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.zero),
        child: Text(
          'Click me',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
              // 延伸到屏幕的右边缘对齐，不用设置元素的宽度了
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                buildKey(colorName: Colors.orange, index: 1),
                buildKey(colorName: Colors.red, index: 2),
                buildKey(colorName: Colors.green, index: 3),
                buildKey(colorName: Colors.teal, index: 4),
                buildKey(colorName: Colors.yellow, index: 4),
              ]),
        ),
      ),
    );
  }
}
